<template>
	<CommonHeader :title="title" :title-url="titleUrl" :navs="navs" :func="func" />
</template>


<script type="module">
	import CommonHeader from '@/components/CommonHeader.vue';
	import { app, navs } from '@/config/config';
	import { store } from '@/common/store';

	const touristMenu = Object.freeze([
		{
			name: "register",
			icon: "fa fa-user",
			url: "/register",
		},
		{
			name: "login",
			icon: "fa fa-sign-in",
			url: "/login",
		},
	]);

	const userMenu = (username) => [
		{
			name: "user",
			value: username ?? "Error!",
			icon: "fa fa-user",
			url: "/user/profile",
		},
		{
			name: "logout",
			icon: "fa fa-sign-out",
			url: "/logout",
		},
	];

	export default {
		name:'oj-header',
		props:['titleUrl', 'activeNav'],
		data() {
			return {
				title: app.name,
				navs: navs.default,
				func: touristMenu,
				store,
			};
		},
		components: {
			CommonHeader,
		},
		created() {
			this.changeMenu();
		},
		watch: {
			'store.role'() {
				this.changeMenu();
			},
		},
		methods: {
			changeMenu() {
				// console.log("changeMenu: ", store.role);

				if (store.isVisitor()) {
					this.func = touristMenu;
				} else {
					this.func = userMenu(store.user?.name);
				}
			}
		}
	}
</script>